<template>
  <div class="bullet-predict-rules">
    <n-card :bordered="false" class="rules-card" size="small">
      <div class="rules-content">
        <div class="rules-header">
          <n-space align="center" :size="8">
            <n-icon :size="18" color="#409eff">
              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
                <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
              </svg>
            </n-icon>
            <n-text strong class="rules-title">子弹价格预测</n-text>
          </n-space>

          <n-button
            text
            size="small"
            @click="toggleExpanded"
            class="expand-button"
          >
            <template #icon>
              <n-icon :size="14">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24">
                  <path
                    fill="currentColor"
                    :d="expanded ? 'M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z' : 'M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z'"
                  />
                </svg>
              </n-icon>
            </template>
            {{ expanded ? '收起详情' : '查看详情' }}
          </n-button>
        </div>

        <!-- 简化说明 -->
        <div v-if="!expanded" class="simple-description">
          <n-text class="simple-text">
            基于历史价格数据、市场趋势分析和相关物品联动性进行AI智能预测，包含预测价格、波动率、趋势强度等多维度分析指标
          </n-text>
          <n-text class="disclaimer-simple">
            预测仅供参考，实际价格以游戏内为准
          </n-text>
        </div>

        <!-- 详细说明 -->
        <div v-if="expanded" class="rules-description">
          <div class="parameters-grid">
            <!-- 第一列 -->
            <div class="parameter-column">
              <div class="parameter-item">
                <n-text :depth="2" class="param-label">预测价格：</n-text>
                <n-text class="param-text">未来综合算法预测的价格</n-text>
              </div>

              <div class="parameter-item">
                <n-text :depth="2" class="param-label">价格波动率：</n-text>
                <n-text class="param-text">90天价格标准差/均值，衡量价格稳定性</n-text>
              </div>

              <div class="parameter-item">
                <n-text :depth="2" class="param-label">趋势强度：</n-text>
                <n-text class="param-text">线性回归斜率，分为"强/弱"</n-text>
              </div>

              <div class="parameter-item">
                <n-text :depth="2" class="param-label">趋势方向：</n-text>
                <n-text class="param-text">预测未来价格走势（上涨/下跌/持平）</n-text>
              </div>

              <div class="parameter-item">
                <n-text :depth="2" class="param-label">可信度：</n-text>
                <n-text class="param-text">综合数据点、趋势可靠性、波动性评估</n-text>
              </div>
            </div>

            <!-- 第二列 -->
            <div class="parameter-column">
              <div class="parameter-item">
                <n-text :depth="2" class="param-label">联动方向：</n-text>
                <n-text class="param-text">与相关品类价格变动的联动关系</n-text>
              </div>

              <div class="parameter-item">
                <n-text :depth="2" class="param-label">联动强度：</n-text>
                <n-text class="param-text">与相关品类价格相关性分数</n-text>
              </div>

              <div class="parameter-item">
                <n-text :depth="2" class="param-label">季节性：</n-text>
                <n-text class="param-text">检测到的周期性（日/周/无）</n-text>
              </div>

              <div class="parameter-item">
                <n-text :depth="2" class="param-label">日均变化率：</n-text>
                <n-text class="param-text">近90天每日均价变化百分比</n-text>
              </div>

              <div class="parameter-item">
                <n-text :depth="2" class="param-label">历史均价：</n-text>
                <n-text class="param-text">30/60/90天的平均价格</n-text>
              </div>
            </div>

            <!-- 第三列 -->
            <div class="parameter-column">
              <div class="parameter-item">
                <n-text :depth="2" class="param-label">支撑位/压力位：</n-text>
                <n-text class="param-text">价格区间内的关键支撑/压力点</n-text>
              </div>

              <div class="parameter-item">
                <n-text :depth="2" class="param-label">未来预测：</n-text>
                <n-text class="param-text">1/3/7/14/30天后预测价格及涨跌幅</n-text>
              </div>

              <div class="parameter-item">
                <n-text :depth="2" class="param-label">目标价格：</n-text>
                <n-text class="param-text">预测达到关键价格的预计天数和日期</n-text>
              </div>

              <div class="parameter-item disclaimer-item">
                <n-text :depth="2" class="param-label">免责声明：</n-text>
                <n-text class="param-text disclaimer">预测仅供参考，实际价格以游戏内为准，投资有风险，决策需谨慎</n-text>
              </div>
            </div>
          </div>
        </div>
      </div>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 响应式数据
const expanded = ref(false)

// 切换展开状态
const toggleExpanded = () => {
  expanded.value = !expanded.value
}
</script>

<style scoped>
.bullet-predict-rules {
  width: 100%;
}

.rules-card {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 8px;
}

.rules-content {
  padding: 16px 20px;
}

.rules-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.rules-title {
  font-size: 16px;
  color: #303133;
}

.expand-button {
  color: #409eff;
  font-size: 12px;
}

.simple-description {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.simple-text {
  font-size: 13px;
  line-height: 1.4;
  color: #606266;
}

.disclaimer-simple {
  font-size: 12px;
  color: #f56c6c;
  font-weight: 500;
}

.rules-description {
  width: 100%;
}

.parameters-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
}

.parameter-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.parameter-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.parameter-item.disclaimer-item {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.param-label {
  font-size: 13px;
  font-weight: 600;
  color: #303133;
  white-space: nowrap;
}

.param-text {
  font-size: 12px;
  line-height: 1.4;
  color: #606266;
}

.param-text.disclaimer {
  color: #f56c6c;
  font-weight: 500;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .parameters-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .rules-content {
    padding: 12px 16px;
  }

  .rules-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
  }



  .parameters-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .parameter-column {
    gap: 10px;
  }

  .parameter-item {
    gap: 3px;
  }


}

@media (max-width: 480px) {
  .rules-content {
    padding: 10px 12px;
  }

  .parameters-grid {
    gap: 12px;
  }

  .parameter-column {
    gap: 8px;
  }
}
</style>
